<template>
  <div class="history-main" v-show="history.length > 0">
    <div class="history-top">
      <IconCard imgUrl="./images/history.png" title="历史搜索"></IconCard>
      <img src="@/assets/images/clear.png" alt="" @click="clearHistory" />
    </div>
    <Tag :list="history"></Tag>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";

export default {
  name: "History",
  data() {
    return {
      history: [],
    };
  },
  created() {
    this.history = JSON.parse(localStorage.getItem("searchHistory")) || [];
  },
  methods: {
    clearHistory() {
      MessageBox.confirm("确认删除全部历史记录?").then((action) => {
        this.history = [];
        localStorage.removeItem("searchHistory");
      });

      // this.$nextTick(() => {
      //   localStorage.removeItem("searchHistory");
      // });
    },
  },
  
};
</script>

<style lang="scss" scoped>
.history-main {
  .history-top {
    display: flex;
    align-items: center;

    img {
      width: 0.5333rem;
      height: 0.5333rem;
      margin-left: 5.8667rem;
    }
  }
}
</style>